body::after{
    content: "";
    background: url(/mp/h5/img/black.png) no-repeat 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 0px;
    display: block;
    position: absolute;
}
[data-dpr="2"] body::after{
    content: "";
    background: url("/mp/h5/img/black.png") no-repeat 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 1px;
    display: block;
    position: absolute;
}
/* ================================================
container-first
================================================ */

.container-first {
    padding: 0;
    margin-top: 1.5rem;
    background-color: #F6F9FA;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.container-first .swiper-container .swiper-wrapper .swiper-first-group {
    text-align: center;
}

.container-first .swiper-first.container-first-top p:nth-child(1) {
    color: #333333;
    letter-spacing: 0;
    margin-top: 1.333rem;
    padding: 0px 50px 0px 50px;
}

.container-first .swiper-first.container-first-top p:nth-child(2) {
    color: #333333;
    letter-spacing: 0;
}

.container-first .swiper-first.container-first-middle {
    margin-top: 1.2rem;
    position: relative;
    height: 5.3rem
}


/* 动画相关 */
.container-first .swiper-first.container-first-middle img:nth-child(1) {
    width: 8rem;
    left: 0.8rem;
    top: 0.8rem;
    position: absolute;
    z-index: 20;
}

.container-first .swiper-first.container-first-middle img:nth-child(2) {
    position: absolute;
    width: 0.4rem;
    top: 1.8rem;
    left: 1.43rem;
    z-index: 21;
}

.container-first .swiper-first.container-first-middle .arrow {
    position: absolute;
    top: 4.3rem;
    left: 7rem;
    width: 0.35rem;
    z-index: 21;
}

.container-first .swiper-first.container-first-middle .apple-group .plate{
    position: absolute;
    width: 0.9677rem;
    top: 5.4533rem;
    left: 5.2rem;
    z-index: 1;
}

.container-first .swiper-first.container-first-middle .animate-1{
   position: absolute;
   width: 0.16rem;
   height: 0px;
   left: 1.56rem;
   bottom: 0;
}

.container-first .swiper-first.container-first-middle .animate-2{
    position: absolute;
    width: 0.4rem;
    top: 1.8rem;
    left: 1.43rem;
    z-index: 21;
 }

 .container-first .swiper-first.container-first-middle .animate-3{
    position: absolute;
    top: 1.05rem;
    left: 1rem;
    width: 1.33rem;
 }

 .container-first .swiper-first.container-first-middle .animate-4{
    position: absolute;
    top: 4.5rem;
    left: 2.6rem;
    width: 0.5rem;
    z-index: 21;
 }

 .container-first .swiper-first.container-first-middle .animate-5{
    position: absolute;
    bottom: 0;
    width: 0.54rem;
    height: 0px;
    left: 3.83rem;
}

.container-first .swiper-first.container-first-middle .animate-6{
    position: absolute;
    width: 0px;
    height: 0.3rem;
    left: 5.54rem;
    top: 2.1rem;
    z-index: 21;
}

.container-first .swiper-first.container-first-middle .apple-group {
    position: absolute;
    width: 100px;
}

.container-first .swiper-first.container-first-middle .apple-group .animate-7{
    position: absolute;
    z-index: 1;
    left: 5.35rem;
    top: 4.5rem;
    width: 0.6rem;
}

.container-first .swiper-first.container-first-middle .animate-8{
    position: absolute;
    bottom: 0;
    width: 1.44rem;
    height: 0px; /*2.04rem*/
    left: 7.8rem;
}

.container-first .swiper-first.container-first-buttom {
    /* margin-top: 2.347rem;
    margin-bottom: 0.76rem; */
    position: absolute;
    top: 12.5rem;
    left: 1.65rem;
}

.container-first .swiper-first.container-first-buttom a:first-child {
    background: #4A90E2;
    color: #FFFFFF;
    letter-spacing: 0;
    padding: 0.2133rem 0.8rem;
    border-radius: 3px;
    text-decoration: none;
}

.container-first .swiper-first.container-first-buttom a:last-child {
    border: 1px solid #D8D8D8;
    color: #333333;
    letter-spacing: 0;
    margin-left: 20px;
    background: #FFFFFF;
    padding: 0.2133rem 0.8rem;
    border-radius: 3px;
    text-decoration: none;
}

.container-first .swiper-second-group .functional-introduction-container {
    background: url(/mp/h5/img/task-system.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 14.5rem;
    width: 100%;
}

.container-first .swiper-third-group .functional-introduction-container {
    background: url(/mp/h5/img/crm-system.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 14.5rem;
    width: 100%;
}

.container-first .swiper-fourth-group .functional-introduction-container {
    background: url(/mp/h5/img/achievements-system.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 14.5rem;
    width: 100%;
}

.container-first .swiper-fifth-group .functional-introduction-container {
    background: url(/mp/h5/img/approval-system.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 14.5rem;
    width: 100%;
}

.container-first .swiper-sixth-group .functional-introduction-container {
    background: url(/mp/h5/img/attendance-system.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 14.5rem;
    width: 100%;
}

.container-first .swiper-container .swiper-pagination {
    bottom: 0.15rem;
}

.container-first .functional-introduction-container article {
    padding-top: 1.6rem;
    text-align: center;
}

.container-first .functional-introduction-container article h1 {
    color: #212121;
    letter-spacing: 0;
    margin-bottom: 0.3rem;
}

.container-first .functional-introduction-container article p {
    color: #777777;
    letter-spacing: -0.34px;
    margin-top: 0.15rem;
}

.container-first .functional-introduction-container article p .high-light {
    color: #4A90E2;
    letter-spacing: -0.34px;
}

.container-first .functional-introduction-container .video{
    margin-left: 3.4rem;
    margin-top: 7.3rem;
    width: 3.3333rem;
}

.container-first .functional-introduction-container .approval-video{
    margin-top: 7.9rem;
}

.container-first .functional-introduction-container .attendance-video{
    margin-top: 7.9rem;
}



/* ================================================
container-second
================================================ */

.container-second {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background-color: #FFFFFF;
    width: 100%;
    background: url('/mp/h5/img/vision.png') no-repeat 0 0;
    background-position: 6.5rem 2.4rem;
    background-size: 2.5rem;
}

.container-second .slogan-group {}

.container-second .slogan-group .mission {
    text-align: center;
    margin-top: 1.733rem;
}

.container-second .slogan-group .mission span:nth-child(1) {
    margin-left: auto;
    color: #333333;
    letter-spacing: -0.46px;
}

.container-second .slogan-group .mission span:nth-child(2) {
    margin-right: auto;
    margin-left: 0.4rem;
    color: #777777;
    letter-spacing: -0.41px;
}

.container-second .slogan-group .vision {
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 0.56rem;
}

.container-second .slogan-group .vision span:nth-child(1) {
    margin-left: auto;
    color: #333333;
    letter-spacing: -0.46px;
    line-height: 22px;
}

.container-second .slogan-group .vision span:nth-child(2) {
    margin-right: auto;
    margin-left: 0.4rem;
    color: #777777;
    letter-spacing: -0.41px;
}

.container-second .slogan-group .vision p {
    margin-left: 1rem;
    color: #777777;
    letter-spacing: -0.41px;
    position: relative;
}

/* .container-second .slogan-group .vision p::after {
    content: "";
    background: url(/mp/h5/img/vision.png) no-repeat 0 0;
    background-size: 100% 100%;
    width: 1.333rem;
    height: 1.333rem;
    display: block;
    position: absolute;
    top: 0rem;
    left: 6.5rem;
} */

.container-second .slogan-group .learn-more {
    background: #EFF6FF;
    border-radius: 3px;
    padding: 0.13rem;
    text-align: center;
    width: 2.6rem;
    height: 0.7rem;
    margin-bottom: 1rem;
    margin-left: 3.5rem;
}

.container-second .slogan-group .learn-more .learn-more-word{
    color: #777777;
}

/* ================================================
container-third
================================================ */

.container-third {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background-color: #F6F9FA;
    text-align: center;
    width: 100%;
    padding-top: 1.333rem;
}

.container-third p {
    color: #333333;
    width: 100%;
    padding-left: 0.693rem;
    padding-right: 0.693rem;
}

.container-third img {
    width: 9rem;
    margin-top: 0.6053rem;
    margin-bottom: 1.3867rem;
    /* margin: 0.7rem 0.5rem 1.4rem 0.5rem; */
}


/* ================================================
container-fourth
================================================ */
.container-fourth {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    width: 100%;
    background-color: #FFFFFF;
}

.container-fourth .swiper-slide .top-report{
    border: 1px solid #BBD0E4;
    border-radius: 10px;
    padding: 0.4533rem 0.4267rem 0.56rem 0.4533rem;
    margin: 0.9333rem 0.7733rem 0.72rem 0.7733rem;
}

.container-fourth .swiper-slide .top-report .top-container img:nth-child(1) {
    width: 1.8667rem;
    /* height: 1.0933rem; */
}

.container-fourth .swiper-slide .top-report .top-container img:nth-child(2) {
    width: 0.6667rem;
    height: 0.6133rem;
    margin-left: 4.7rem;
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
}

.container-fourth .swiper-slide .top-report .bottom-container p{
    color: #333333;
    margin-top: 0.3733rem;
    word-break: break-all;
    text-align: justify;
}

.container-fourth .swiper-slide .bottom-report{
    border: 1px solid #BBD0E4;
    border-radius: 10px;
    padding: 0.4533rem 0.4267rem 0.56rem 0.4533rem;
    margin: 0rem 0.7733rem 0.72rem 0.7733rem;
}

.container-fourth .swiper-slide .bottom-report .top-container img:nth-child(1) {
    width: 0.6667rem;
    height: 0.6133rem;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.container-fourth .swiper-slide .bottom-report .top-container img:nth-child(2) {
    width: 1.8667rem;
    /* height: 1.0933rem; */
    margin-left: 4.9rem;
}

.container-fourth .swiper-slide .bottom-report .bottom-container p{
    color: #333333;
    margin-top: 0.3733rem;
    word-break: break-all;
    text-align: justify;
}

/* ================================================
container-fifth
================================================ */

.container-fifth {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    width: 100%;
    background-color: #F6F9FA;
}

.container-fifth article {
    margin-top: 0.96rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
}

.container-fifth h1 {
    color: #212121;
}

.container-fifth p {
    color: #777777;
    margin-top: 0.2667rem;
}

.container-fifth .container-fifth-form {
    text-align: center;
    position: relative;
}

.container-fifth .container-fifth-form .name-box {
    position: relative;
    margin-top: 0.5333rem;
}

.container-fifth .container-fifth-form .name-box img {
    position: absolute;
    top: 0.15rem;
    left: 0.1333rem;
    width: 0.5333rem;
}

.container-fifth .container-fifth-form .name-box input {
    text-indent: 0.6333rem;
    width: 8.4533rem;
    height: 0.8267rem;
}

.container-fifth .container-fifth-form .phone-box {
    position: relative;
    margin-top: 0.5333rem;
}

.container-fifth .container-fifth-form .phone-box img {
    position: absolute;
    top: 0.15rem;
    left: 0.1333rem;
    width: 0.5333rem;
}

.container-fifth .container-fifth-form .phone-box input {
    text-indent: 0.6333rem;
    width: 8.4533rem;
    height: 0.8267rem;
}

.container-fifth .container-fifth-form textarea {
    margin-top: 0.5333rem;
    resize: none;
    width: 8.4533rem;
}

.container-fifth .container-fifth-form label {
    position: absolute;
    color: red;
    font-size: 11px;
    margin-top: 5px;
    left: 0;
}

[data-dpr="2"] .container-fifth .container-fifth-form label {
    font-size: 22px;
}

[data-dpr="3"] .container-fifth .container-fifth-form label {
    font-size: 33px;
}

.container-fifth .container-fifth-form .submit-button {
    margin-top: 0.5333rem;
    margin-bottom: 1.1467rem;
}

.container-fifth .container-fifth-form .submit-button input {
    width: 5rem;
    height: 1.0667rem;
    background-color: #4A90E2;
    border-radius: 3px;
}
